let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

let btnHtml = ""
// 循环遍历
data.forEach(function (v, i) {
    btnHtml += `<span class="number ${i === 0 ? 'select' : ''}" price="${v.price}" unitPrice="${v.unitPrice}">${v.count}次</span>`
})
// console.log(btnHtml);
// 将拼接的html片段放到页面上
let btns = document.querySelector(".banner .btns")
btns.innerHTML += btnHtml



let spanBtn = document.querySelectorAll(".banner .btns .number")
spanBtn.forEach(function (v) {
    v.addEventListener("click", function () {
        for (let x = 0; x < spanBtn.length; x++) {
            spanBtn[x].classList.remove("select")
        }
        this.classList.add("select")
        let money = document.querySelector(".banner .use .money")
        let count = document.querySelector(".banner .use .count")
        money.innerHTML = this.getAttribute("price")
        count.innerHTML = this.getAttribute("price")
    })
})

let apiDocument = document.querySelector(".api-document")
let errorCode = document.querySelector(".error-code")
let sampleCode = document.querySelector(".sample-code")
let contactUs = document.querySelector(".contact-us")
let aHtml = document.querySelectorAll(".page-switch li a")
let divHtml = [apiDocument,errorCode,sampleCode,contactUs]
// let divHtml = document.querySelectorAll(".api-content-left .api-left")
// console.log(divHtml);
// // console.log(aHtml)
// aHtml.forEach(function(v,i){
//     v.addEventListener("click",function(){
//         for(let x=0;x<aHtml.length;x++){
//             aHtml[x].className=""
//             divHtml[x].classList.remove("active")
//         }
//         this.className="active"
//         divHtml[i].classList.add("active")
//     })
// })
aHtml.forEach(function (v) {
    v.addEventListener("click", function () {
        let x = 0
        for (; x < aHtml.length; x++) {
            aHtml[x].classList.remove("active")   
        }
        this.classList.add("active")
        // console.log(aHtml[x]);
        if(this.innerHTML==="API文档"){
           
           errorCode.style.display = "none"
           sampleCode.style.display = "none"
           contactUs.style.display = "none"
           apiDocument.style.display = "block"
        }else if(this.innerHTML==="错误码参照"){
            sampleCode.style.display = "none"
           contactUs.style.display = "none"
           apiDocument.style.display = "none"
            errorCode.style.display = "block"
        }else if(this.innerHTML==="示例代码"){
            contactUs.style.display = "none"
           apiDocument.style.display = "none"
            errorCode.style.display = "none"
            sampleCode.style.display = "block"
        }else if(this.innerHTML==="联系我们"){
            apiDocument.style.display = "none"
            errorCode.style.display = "none"
            sampleCode.style.display = "none"
            contactUs.style.display = "block"
        }
    })
})
// aHtml.forEach(function (v) {
//     divHtml.forEach(function(w){
//         v.addEventListener("click", function () {
//             for(let x = 0;x<aHtml.length;x++){
//                 for(let y = 0;y<divHtml.length;y++){
                    
//                         aHtml[x].classList.remove("active")
//                         divHtml[y].classList.remove("active")
//                     if(x==y){
//                         this.classList.add("active")
//                     }
//                 }
                
//             }
//             // this.classList.add("active")

//         })
//     })
// })
